<template>
  <div class="detailBox">
      <div class="left_nav">
            <ul>
              <li v-for="(item,key) in navArr" :key="key" :class="navIndex == key ?'on':''" @click="navClick(item,key)">
                    <i class="iconfont" :class="item.icon"></i>
                    {{item.name}}
              </li>
            </ul>
      </div>
      <div class="right_content">
            <!-- 周质控数据 -->
            <div class="module_box" v-show="moduleIndex == 0">
                  <div class="toolbox">
                    <span>时间选择 : </span>
                    <div class="layoutBox" style="width:242px">
                      <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </div>&emsp;&emsp;
                    <el-button ><i class="iconfont icon-sousuo"></i>查询</el-button>
                  </div>
                  <div class="table">
                     <el-table border :data="tableData">
                            <el-table-column
                                prop=""
                                label="监测时间">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="审核时间">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="监测项目">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="单位">
                            </el-table-column>
                             <el-table-column
                                prop=""
                                label="仪器测试值">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="标准液浓度">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="误差">
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="是否合格">
                            </el-table-column>
                    </el-table>
                  </div>
            </div>
            <!-- 零点跨度数据 -->
            <div class="module_box" v-show="moduleIndex == 1">
                  <div>
                       <el-table border :data="tableData">
                              <el-table-column type="index" label="序号"></el-table-column>
                              <el-table-column prop="date" label="日期" width="160"></el-table-column>
                              <el-table-column prop="" label="测试结果"></el-table-column>
                              <el-table-column label="零点核查">
                                <el-table-column label="标准样浓度" width="90"></el-table-column>
                                <el-table-column label="绝对误差"></el-table-column>
                                <el-table-column label="合格情况"></el-table-column>
                              </el-table-column>
                              <el-table-column label="24小时零点漂移">
                                <el-table-column label="前一次测试结果" width="115"></el-table-column>
                                <el-table-column label="跨度值"></el-table-column>
                                <el-table-column label="相对误差"></el-table-column>
                                <el-table-column label="合格情况"></el-table-column>
                              </el-table-column>
                      </el-table>
                  </div>
                 <div>
                       <el-table border :data="tableData">
                              <el-table-column type="index" label="序号" width="48"></el-table-column>
                              <el-table-column prop="date" label="日期" width="160"></el-table-column>
                              <el-table-column prop="" label="测试结果"></el-table-column>
                                <el-table-column label="跨度核查">
                                <el-table-column label="标准样浓度"  width="90"></el-table-column>
                                <el-table-column label="绝对误差"></el-table-column>
                                <el-table-column label="合格情况"></el-table-column>
                              </el-table-column>
                              <el-table-column label="24小时跨度漂移">
                                <el-table-column label="前一次测试结果" width="115"></el-table-column>
                                <el-table-column label="跨度值"></el-table-column>
                                <el-table-column label="相对误差"></el-table-column>
                                <el-table-column label="合格情况"></el-table-column>
                              </el-table-column>
                      </el-table>
                  </div>
            </div>
            <!-- 关键参数 -->
            <div class="module_box" v-show="moduleIndex == 2">
                  <div class="table">
                       <el-table border :data="tableDataParam" height="100%">
                              <el-table-column
                                  type="index"
                                  label="序号">
                              </el-table-column>
                              <el-table-column
                                  prop="name"
                                  width="180px"
                                  label="名称">
                              </el-table-column>
                              <el-table-column
                                  prop="codeName"
                                   width="220px"
                                  label="参数值">
                              </el-table-column>
                              <el-table-column
                                  prop="describe"
                                  label="备注">
                              </el-table-column>
                      </el-table>
                  </div>
            </div>
            <!-- 流程日志 -->
            <div class="module_box" v-show="moduleIndex == 3">
                   <div class="tablebox">
            <div class="table-head">
              <table>
                <tr>
                  <th width="30%">监测时间</th>
                  <th width="70%">日志</th>
                
                </tr>
              </table>
            </div>
            <el-scrollbar style="height:calc(100% - 32px)">
              <ul class="table-body clearfix">
                <li v-for="(item,index) in tableDataProce">
                  <div class="toggle-row" :class="{active:item.toggle}">
                    <i class="toggle-icon" @click="toggleTable(item)" :class="{active:item.toggle}"></i>
                    <span>{{item.type}}</span>
                  </div>
                  <el-collapse-transition>
                    <div v-if="item.toggle">
                      <table>
                        <tr v-for="(n,m) in item.list">
                          <td width="30%">{{ n.dataTime }}</td>
                          <td width="70%">{{ n.info }}</td>
                         
                        </tr>
                      </table>
                    </div>
                  </el-collapse-transition>
                </li>
              </ul>
            </el-scrollbar>
          </div>
                       
            </div>
            <!-- 历史数据 -->
            <div class="module_box" v-show="moduleIndex == 4">
                  <div class="toolbox">
                    <span>时间选择 : </span>
                    <div class="layoutBox" style="width:242px">
                      <el-date-picker v-model="dateRangeH" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
                    </div>&emsp;&emsp;
                    <el-checkbox v-model="checked">原始数据</el-checkbox>
                    <el-button @click='searchH'><i class="iconfont icon-sousuo"></i>查询</el-button>
                  </div>
                  <div class="table">
                        <div class="l_table">
                                 <el-table border :data="historicalData" height="100%" v-loading='loadingH'
                                   element-loading-text="加载中"
                                    element-loading-spinner="loading-type-a"
                                    element-loading-background="rgba(255, 255, 255, 1)">
                                     <el-table-column

                                         prop="dataTime"
                                         width="150px"
                                         label="监测时间">
                                     </el-table-column>
                                     <el-table-column
                                         prop="value"
                                         width="70px"
                                         :label="titleLabel">
                                     </el-table-column>
                                </el-table>
                        </div>
                        <div class="r_box" id="echartbox" v-loading='loadingH'
                                   element-loading-text="加载中"
                                    element-loading-spinner="loading-type-a"
                                    element-loading-background="rgba(255, 255, 255, 1)">

                        </div>
                  </div>
            </div>
            <!-- 上下游数据 -->
            <div class="module_box" v-show="moduleIndex == 5">
                  <div class="toolbox">
                    <span>时间选择 : </span>
                    <div class="layoutBox" style="width:242px">
                      <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </div>&emsp;&emsp;
                    <el-button ><i class="iconfont icon-sousuo"></i>查询</el-button>
                  </div>
                  <div class="e_box" id="e_box" style="height:240px">

                  </div>
                  <div class="mapBox" style="height:254px">
                      地图
                  </div>
            </div>
            <!-- 运维情况  -->
            <div class="module_box" v-show="moduleIndex == 6">
                  <div class="table">
                       <el-table border :data="tableData">
                              <el-table-column
                                  type="index"
                                  label="序号">
                              </el-table-column>
                              <el-table-column
                                  prop="date"
                                  label="运维单位">
                              </el-table-column>
                              <el-table-column
                                  prop=""
                                  label="角色">
                              </el-table-column>
                               <el-table-column
                                  prop=""
                                  label="运维人员">
                              </el-table-column>
                               <el-table-column
                                  prop=""
                                  label="联系电话">
                              </el-table-column>
                      </el-table>
                  </div>
            </div>
            <!-- 操作记录  -->
            <div class="module_box" v-show="moduleIndex == 7">
                  <div class="table">
                       <el-table border :data="tableDataR" height="100%">
                              <el-table-column
                                  type="index"
                                  label="序号">
                              </el-table-column>
                              <el-table-column
                                  prop="AUDIT_DATE"
                                  label="操作时间">
                              </el-table-column>
                              <el-table-column
                                  prop="AUDIT_USER"
                                  label="操作人员">
                              </el-table-column>
                               <el-table-column
                                  prop="AUDIT_OPERATION"
                                  label="操作">
                              </el-table-column>
                               <el-table-column
                                  prop="AUDIT_REASON"
                                  label="描述">
                              </el-table-column>
                      </el-table>
                  </div>
            </div>
            <!-- 佐证材料 -->
            <div class="module_box" v-show="moduleIndex == 8">
                  <div class="table">
                       <el-table border :data="tableData">
                              <el-table-column
                                  prop="date"
                                  label="上传人">
                              </el-table-column>
                              <el-table-column
                                  prop=""
                                  label="文件名">
                              </el-table-column>
                               <el-table-column
                                  prop=""
                                  label="操作">
                              </el-table-column>
                      </el-table>
                  </div>
            </div>
      </div> 
  </div>
</template>

<script>
export default {
  name: "",
  props: ["fId",'name','fName','fTime','mn','dateRangeone'],
  data() {
    return {
      navArr: [],
      dateRange: [],
      dateRangeH:[],
      navIndex: 0,
      moduleIndex: 0,
      tableData: [],
      tableDataR: [],//操作记录数据
      tableDataParam:[],//关键参数数据
      tableDataProce:[],//流程日志
      historicalData:[],
      checked: false,
      titleLabel:'',
      loadingH:true,
    };
  },
  created() {
    this.dateRange=this.dateRangeone;
    this.dateRangeH=this.dateRangeone;
    if(this.name == 'dataone'){
        this.moduleIndex=0;
        this.navArr=[ { name: "周质控数据", id: 0, icon: "icon-renwuguanli" },
         { name: "流程日志", id: 3, icon: "icon-renwuguanli" },
         { name: "历史数据", id: 4, icon: "icon-renwuguanli" },
         { name: "上下游数据", id: 5,icon: "icon-renwuguanli" },
         { name: "运维情况", id: 6, icon: "icon-renwuguanli" },
         { name: "操作记录", id: 7, icon: "icon-renwuguanli" },
         { name: "佐证材料", id: 8, icon: "icon-renwuguanli" }]
    }else{
      this.moduleIndex=1;
      this.getZeroData()
      this.navArr=[
        { name: "零点跨度数据", id: 1, icon: "icon-renwuguanli" },
        { name: "关键参数", id: 2, icon: "icon-renwuguanli" },
        { name: "流程日志", id: 3, icon: "icon-renwuguanli" },
        { name: "历史数据", id: 4, icon: "icon-renwuguanli" },
        { name: "上下游数据", id: 5, icon: "icon-renwuguanli" },
        { name: "运维情况", id: 6, icon: "icon-renwuguanli" },
        { name: "操作记录", id: 7, icon: "icon-renwuguanli" },
        { name: "佐证材料", id: 8, icon: "icon-renwuguanli" }]
    };
   
  },
  mounted() {},
  methods: {
    //历史数据查询
    searchH(){
       this.loadingH=true;
        this.$http.get("/Receiving/queryHourDataByMnFactor", {
          params: {
            mn: this.mn,
            factorCode:this.fName,
            beginTime:this.dateRangeH[0]+' 00:00:00',
            endTime:this.dateRangeH[1]+' 23:59:59',
          }
        }).then(res => {
          if(res.data.code === 0){
            this.loadingH=false;
            let t =res.data.content.info.title
            let x = res.data.content.info.times;
            let y = res.data.content.info.datas;
            
            this.titleLabel=t.split(' ')[0]
            this.historicalData = res.data.content.info.hourData;
            this.initEchartOne(x,y,t,this.titleLabel,res.data.content.info.unit);
          }
        });
    },
     toggleTable(item) {
      if (item.toggle) {
        item.toggle = false;
      } else {
        item.toggle = true;
      }
    },
    navClick(item, key) {
      this.navIndex = key;
      this.moduleIndex = item.id;
      if (item.name == "操作记录") {
        this.$http
          .get("/DataAudit/dataAudit/auditOperaRecord", {
            params: {
              flowId: this.fId,
              
            }
          })
          .then(res => {
            this.tableDataR = res.data.content.dataList;
          });
      }else if(item.name == "流程日志"){
          this.$http
          .get("/Receiving/queryEquipFlowLogData", {
            params: {
              mn: 'A430100_2007',//this.mn,
              factorCode:'w21011',//this.fName,
              beginTime:this.dateRange[0] +' 00:00:00',
              endTime:this.dateRange[1]+' 23:59:59'
            }
          })
          .then(res => {
            let arr=[];
              arr[0]={
                id:0,
                type:'系统日志',
                toggle: false,
                list:res.data.content.dataList.sysLog
              }
               arr[1]={
                id:1,
                type:'仪器日志',
                toggle: false,
                list:res.data.content.dataList.yqLog
              };
              this.tableDataProce=arr;
           
          });
      }else if(item.name == "关键参数"){
       
          this.$http
          .get("/Receiving/queryEquipmentParam", {
            params: {
              mn: this.mn,
              factorCode:this.fName
            }
          })
          .then(res => {
            this.tableDataParam=res.data.content.dataList;
          });
      }else if (item.name == "历史数据") {
        this.searchH()
      
      } else if (item.name == "上下游数据") {
        setTimeout(() => {
          this.initEchartTwo();
        }, 300);
      }
    },
    initEchartOne(x,y,t,l,u) {
       y.map((item,index)=>{
         return Number(item);
       });
      var option = {
        title: {
          text: t,
          x: "center"
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "10%"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [l],
          y: "bottom"
        },
        toolbox: {
          show: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x
        },
        yAxis: {
          type: "value",
          name: u
        },
        series: [
          {
            name: l,
            type: "line",
            data: y,
            itemStyle: {
              normal: {
                color: "#4379CE"
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4379CE"
                  },
                  {
                    offset: 1,
                    color: "#fff"
                  }
                ])
              }
            }
          }
        ]
      };
      //初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echartbox"));

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
      //   myChart.on("click", function(params) {
      //     console.log(params);
      //   });
    },
    initEchartTwo() {
      let option = {
        title: {
          text: "水温 - 上下游趋势图",
          x: "center"
        },
        xAxis: {
          data: ["丰城小港口", "生米", "吴城赣江", "昌邑"]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
                backgroundColor: '#505765'
            }
          },
          formatter: function (param) {
         
                return param[0].axisValueLabel + "<br>"+
                       "最大值 = " +param[0].data[2]+ "<br>"+
                       "最小值 = " +param[0].data[1]+ "<br>"+
                       "中位值 = " +param[0].data[3]+ "<br>"+
                       "最新值 = " +param[0].data[4]+ "<br>"+
                       "平均值 = " +param[0].data[5]+ "<br>"  
          }
        },
        legend: {
          data:['中位值','最新值','平均值',],
          y:'bottom',
        },
        yAxis: {
          type: 'value',
          name: '监测值(℃)',
         
        },
        series: [
          {
            type: "k",
            name:'最大最小值',
            barWidth: "30",
            data: [
              [21.9, 23.1, 21.9, 23.1,22.6,22.6,22.6],  
              [22.7, 23.8, 22.7, 23.8,23.2,22.8,23],
              [19.8, 21.0, 19.8, 21.0,20.8,20.7,20.6],
              [21.8, 22.8, 21.8, 22.8,22.8,22.6,22.6]
            ],
            tooltip:{
              show: true
            },
            itemStyle: {
              normal: {
                color: '#166bce',
                color0: '#166bce',
                borderColor: '#166bce',
                borderColor0: '#166bce'
              }
            },
          },
          {
            data: [22.6, 23.2, 20.8, 22.8,],
            type: "line",
            name:'中位值',
            itemStyle: {
              normal: {
                color: "#67C239"
              }
            },
          },
          {
            data: [22.6, 22.8, 20.7, 22.6,],
            type: "line",
            name:'最新值',
            itemStyle: {
              normal: {
                color: "#E5A23C"
              }
            },
          },
          {
            data: [22.6, 23, 20.6, 22.6, ],
            type: "line",
            name:'平均值',
            itemStyle: {
              normal: {
                color: "#4379CE"
              }
            },
          },
        ]
      };
      var myChart = this.$echarts.init(document.getElementById("e_box"));
      myChart.setOption(option);
    },
    //获取零点漂移数据
    getZeroData(){
        //计算当前日期前五天的日期
        let sTime = new Date(this.fTime.replace(/-/g, "/")).getTime()- 5 * 24 * 3600 * 1000;
        this.$http.get("/Quality/testData/zeroDriftData", {
          params: {
            startTime: new Date(sTime).format('yyyy-MM-dd')+' 00:00:00',
            endTime:  this.fTime,
            indexCodes: this.fName,
            stationCodes: this.fId //this.stationId
          }
        }).then(res=>{

        })
    }
  }
};
</script>

<style scoped lang="less">
.detailBox {
  height: 550px;
  width: 100%;
  .left_nav {
    width: 150px;
    float: left;
    height: 100%;
    text-align: left;
    border-right: 1px solid #dbdbdb;
    li {
      height: 41px;
      line-height: 41px;
      padding-left: 10px;
      cursor: pointer;
      border-bottom: 1px solid #dbdbdb;
      &:hover {
        color: #1989fa;
      }
      i {
        vertical-align: -1px;
      }
    }
    .on {
      color: #1989fa;
      background: #ebf0f5;
      position: relative;

      &:hover {
        color: #1989fa;
      }
      //   &:after{
      //     content: '';
      //     width: 10px;
      //     height: 10px;
      //     background: #fff;
      //     position: absolute;
      //     right: -5px;
      //     top: 50%;
      //     transform: translateY(-5px) rotate(-45deg);
      //   }
    }
  }
  .right_content {
    width: calc(100% - 150px);
    float: left;
    height: 100%;
    padding: 6px;
    .module_box {
      height: 100%;
      .table {
        padding: 0px;
        height: calc(100% - 44px);
        padding-top: 6px;
        .l_table {
          width: 221px;
          float: left;
          height: 100%;
        }
        .r_box {
          float: right;
          width: calc(100% - 227px);
          height: 100%;
        }
      }
    }
    .toolbox {
      border: 1px solid #d6e3f2;
    }
  }
   .tablebox {
    height: 100%;
  }
  .table-head,
  .table-body {
    table {
      width: 100%;
      border-collapse: collapse;
      td,
      th {
        border: 1px solid #d6e3f2;
        padding: 0 3px;
        height: 30px;
        text-align: center;
      }
      th{
       font-weight: 100;
      }
    }
    .toggle-row {
      height: 30px;
      line-height: 30px;
      padding-left: 6px;
      border-left: 1px solid #d6e3f2;
      border-right: 1px solid #d6e3f2;
      border-bottom: 1px solid #d6e3f2;
      &.active {
        /*border-bottom: none;*/
      }
    }
  }
  .table-body {
    table {
      margin-top: -1px;
    }
  }
  .toggle-icon {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
    width: 13px;
    height: 13px;
    background: url("../../assets/images/retract-toggle.png") no-repeat;
    cursor: pointer;
    &.active {
      background: url("../../assets/images/open-toggle.png") no-repeat;
    }
  }
}
</style>
